<template>
	<div class="goodsDetails">
		<div class="roll_banner">
			<!-- Swiper -->
		    <div class="swiper-container">
		        <div class="swiper-wrapper">
		            <div class="swiper-slide">
		            	<img :src="swilperImg"/>
		            </div>
		            <div class="swiper-slide">
		            	<img :src="swilperImg2"/>
		            </div> 
		            <div class="swiper-slide">
		            	<img :src="swilperImg3"/>
		            </div>
		        </div>
		         <!-- Add Pagination -->
       			 <div class="swiper-pagination swiper-pagination-h"></div>
		    </div>
		    
		</div>
	</div>
</template>

<script>
	export default{
		data: function(){
			return {
				swilperImg:"https://www.qpmall.com:10000/M00/1B/41/ZcjD5VaUaWeAK0kzAALECT_RVrM024.jpg",
				swilperImg2:"https://www.qpmall.com:10000/M00/1B/41/ZcjD5VaUaWiAX36nAAM3sG-jnAU465.jpg",
				swilperImg3:"https://www.qpmall.com:10000/M00/1B/41/ZcjD5VaUaWiAX36nAAM3sG-jnAU465.jpg"
			}
		},
		mounted: function(){
			this.swiper();
		},
		methods:{
			swiper: function(){
				var swiper = new Swiper('.swiper-container', {
					pagination: '.swiper-pagination-h',
        			paginationClickable: true,
			        slidesPerView: 1,
			        paginationClickable: true,
			        spaceBetween: 30,
			        autoplay: 2000,
			        loop: true
			    });
			}
		}
	}
</script>

<style>
	@import url("../assets/css/swiper.min.css");
</style>